import React , {useEffect, useState} from 'react'
import {connect} from "react-redux"
import * as action from "../../action"
import {bindActionCreators} from "redux" // 合并抽离出去之后的action的
import MyImg from '../../components/MyImg'
import { Pagination } from 'antd';
function Tset(props) {
  let [currentPage,setCurrentPage] = useState(1) // 当前页数，默认第一页
  console.log(props);
  useEffect(()=>{
    props.getlist()
  },[])

  return (
  
    <div>
        {
          props.arr && props.arr.length ? props.arr.slice((currentPage -1)*5,currentPage*5).map((item,index)=>{
              return <MyImg key={index} data={item.img} ></MyImg>
          }):""
        }
        {/* 点击第几页的时候要知道我当前点击的页码，还要知道每页几条和总条数 */}
        <Pagination defaultCurrent={1} total={props.arr.length} defaultPageSize={5} onChange={(val,size)=>{setCurrentPage(val)}} />
    </div>
  )
}
const mapStateToProps = (state)=>{ // 便利仓库的数据提供给组件的props
    return {
      ...state.tablereducer
    }
}
const mapDispatchToprops = (dispatch)=> bindActionCreators(action,dispatch) // 便利所有的dispatch提供给组件的props

export default connect(mapStateToProps,mapDispatchToprops)(Tset)